<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery淡入和淡出的应用</title>
        <script src="js/jquery-1.12.4.js"></script>     
        <style>
            p {
                width: 100px;
                height: 100px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <h3>jQuery淡入和淡出的应用(默认效果)</h3>
        <button id="btn1-1" type="button"> 淡入 </button>
        <button id="btn1-2" type="button"> 淡出 </button>
        <p id="test01"> 测试段落01 </p>
        <hr>
        <h3>jQuery淡入和淡出的应用(规定时长)</h3>
        <button id="btn2-1" type="button"> 淡入 </button>
        <button id="btn2-2" type="button"> 淡出 </button>
        <p id="test02"> 测试段落02 </p>
        <script>
            $(document).ready(function() {
                $("#btn1-1").click(function() {
                    $("p#test01").fadeIn();
                });

                $("#btn1-2").click(function() {
                    $("p#test01").fadeOut();
                });

                $("#btn2-1").click(function() {
                    $("p#test02").fadeIn(3000);
                });

                $("#btn2-2").click(function() {
                    $("p#test02").fadeOut(3000);
                });
            });
        </script>
    </body>
</html>